<template>
  <el-dialog
    :title="$t('msg.excel.title')"
    :model-value="modelValue"
    width="30%"
    @close="closed"
  >
    <el-input
      :placeholder="$t('msg.excel.placeholder')"
      border
      v-model="excelName"
    ></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.excel.close') }}</el-button>
        <el-button @click="onConfirm" type="primary" :loading="loading">{{
          $t('msg.excel.confirm')
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { watchSwitchLang } from '@/utils/i18n'
import { getUserManageAllList } from '@/api/user-manage'
import { USER_RELATIONS } from './Export2ExcelConstant'
import { dateFilter } from '@/filter/index'

defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue'])

const loading = ref(false)

// 导出的excel的名称
const i18n = useI18n()
let exportDefaultName = i18n.t('msg.excel.defaultName')
const excelName = ref(exportDefaultName)
watchSwitchLang(() => {
  exportDefaultName = i18n.t('msg.excel.defaultName')
  excelName.value = exportDefaultName
})

// 弹窗关闭
const closed = () => {
  emits('update:modelValue', false)
}

// 确认事件
const onConfirm = async () => {
  const allUserList = (await getUserManageAllList()).list
  console.log(allUserList)

  // 动态导入excel工具包
  const excel = await import('@/utils/Export2Excel')
  const data = formatJson(USER_RELATIONS, allUserList)
  excel.export_json_to_excel({
    // excel 的表头
    header: Object.keys(USER_RELATIONS),
    // excel 的数据
    data,
    // 文件名称
    filename: excelName.value || exportDefaultName
    // 是否自动列宽
    // 文件类型
  })
  closed()
}

// 解析数据
const formatJson = (headers, rows) => {
  // 当我们使用 export_json_to_excel 方法的时候，传递的data 数据是一个二维数组
  return rows.map((item) => {
    return Object.keys(headers).map((key) => {
      // 角色需要进行特殊处理， 因为角色可能是一个列表， 需要转换成字符串
      if (headers[key] === 'role') {
        const roles = item[headers[key]]
        return JSON.stringify(roles.map((role) => role.title))
      }
      if (headers[key] === 'openTime') {
        return dateFilter(item[headers[key]])
      }
      return item[headers[key]]
    })
  })
}
</script>

<style scoped lang="scss">
.el-input {
  border: 1px solid #dcdfe6;
}
</style>
